<template>
    <div>
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="main">
            <!-- <slot></slot> -->
            <!-- <slot :data="data"></slot> -->
            <div v-for="(item, index) in data" :key="index">
                <slot :data="item" :index="index"></slot>
            </div>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type Names = {
    name: string,
    age: number
}
const data = reactive<Names[]>([
    {
        name: '张三',
        age: 20
    },
    {
        name: '李四',
        age: 21
    },
    {
        name: '王五',
        age: 22
    }
])
</script>

<style lang="less" scoped>
.header {
    height: 150px;
    background-color: red;
    color: white;
}
.main {
    height: 300px;
    background-color: pink;
    color: white;
}
.footer {
    height: 150px;
    background-color: grey;
    color: white;
}
</style>